@mebuBorderColor: #2962a2;

/*菜单样式*/
#menuBox {
  .el-menu {
    // border-top: 1px solid @mebuBorderColor;
    a {
      vertical-align: baseline !important;
      width: 100%;
      display: inline-block;
      height: 100%;
    }

    &>div {

      //一级菜单
      .el-menu-item,
      .el-submenu .el-submenu__title {
        border-bottom: 1px solid@mebuBorderColor;
      }

      &>a>.el-menu-item,
      &>.el-submenu>.el-submenu__title {
        //一级菜单的背景色与字体颜色
        background-color: @menuBg  !important;

        i,
        span {
          color: @menuText  !important;
        }

        &:hover {
          //一级菜单鼠标滑过的背景色与字体颜色
          background-color: @menuHover  !important;

          i,
          span {
            color: @menuHoverText  !important;
          }
        }

        &.is-active {
          //激活一级菜单的背景色与字体颜色
          background-color: @menuActive  !important;

          i,
          span {
            color: @menuActiveText  !important;
          }
        }
      }

      //二级菜单
      &>.el-submenu>.el-menu>div {

        .el-menu-item,
        .el-submenu>.el-submenu__title {
          //二级菜单的背景色与字体颜色
          background-color: @subMenuBg  !important;

          i,
          span {
            color: @submenuText  !important;
          }

          &:hover {
            //二级菜单鼠标滑过的背景色与字体颜色
            background-color: @subMenuHover  !important;

            i,
            span {
              color: @subMenuHoverText  !important;
            }
          }

          &.is-active {
            //激活二级菜单的背景色与字体颜色
            background-color: @subMenuActive  !important;

            i,
            span {
              color: @subMenuActiveText  !important;
            }
          }
        }

        //三级菜单
        &>.el-submenu>.el-menu>div {
          .el-menu-item {
            //  border-top: 1px solid #dcdcdc;
            //三级菜单的背景色与字体颜色
            background-color: @sub3MenuBg  !important;

            i,
            span {
              color: @sub3menuText  !important;
            }

            &:hover {
              //三级菜单鼠标滑过的背景色与字体颜色
              background-color: @sub3MenuHover  !important;

              i,
              span {
                color: @sub3MenuHoverText  !important;
              }
            }

            &.is-active {
              //激活三级菜单的背景色与字体颜色
              background-color: @sub3MenuActive  !important;

              i,
              span {
                color: @sub3MenuActiveText  !important;
              }
            }
          }
        }
      }
    }
  }
}


/*菜单样式*/
#menuBox_v1 {
  .el-menu {
    border-top: 1px solid @mebuBorderColor;

    .el-menu-item {
      &>a {
        vertical-align: baseline !important;
        width: 100%;
        display: inline-block;
        height: 100%;
      }

    }

    &>div {

      //一级菜单
      .el-menu-item,
      .el-submenu .el-submenu__title {
        border-bottom: 1px solid@mebuBorderColor;
      }

      &>.el-menu-item,
      &>.el-submenu>.el-submenu__title {
        //一级菜单的背景色与字体颜色
        background-color: @menuBg  !important;

        i,
        span {
          color: @menuText  !important;
        }

        &:hover {
          //一级菜单鼠标滑过的背景色与字体颜色
          background-color: @menuHover  !important;

          i,
          span {
            color: @menuHoverText  !important;
          }
        }

        &.is-active {
          //激活一级菜单的背景色与字体颜色
          background-color: @menuActive  !important;

          i,
          span {
            color: @menuActiveText  !important;
          }
        }
      }

      //二级菜单
      &>.el-submenu>.el-menu>div {

        .el-menu-item,
        .el-submenu>.el-submenu__title {
          //二级菜单的背景色与字体颜色
          background-color: @subMenuBg  !important;

          i,
          span {
            color: @submenuText  !important;
          }

          &:hover {
            //二级菜单鼠标滑过的背景色与字体颜色
            background-color: @subMenuHover  !important;

            i,
            span {
              color: @subMenuHoverText  !important;
            }
          }

          &.is-active {
            //激活二级菜单的背景色与字体颜色
            background-color: @subMenuActive  !important;

            i,
            span {
              color: @subMenuActiveText  !important;
            }
          }
        }

        //三级菜单
        &>.el-submenu>.el-menu>div {
          .el-menu-item {
            //  border-top: 1px solid #dcdcdc;
            //三级菜单的背景色与字体颜色
            background-color: @sub3MenuBg  !important;

            i,
            span {
              color: @sub3menuText  !important;
            }

            &:hover {
              //三级菜单鼠标滑过的背景色与字体颜色
              background-color: @sub3MenuHover  !important;

              i,
              span {
                color: @sub3MenuHoverText  !important;
              }
            }

            &.is-active {
              //激活三级菜单的背景色与字体颜色
              background-color: @sub3MenuActive  !important;

              i,
              span {
                color: @sub3MenuActiveText  !important;
              }
            }
          }
        }
      }
    }
  }
}
